<template>
    <div class="head">
        <div class="logo">Charts-Custom</div>
        <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
        >
            <el-menu-item index="Home">监控中心</el-menu-item>
            <el-submenu index="ChartLayout">
                <template slot="title">我的工作台</template>
                <el-menu-item index="ChartLayout-demo">未定制图表</el-menu-item>
                <el-menu-item index="ChartLayout-charts">已定制图表</el-menu-item>
                <el-menu-item index="ChartLayout-theme">主题</el-menu-item>
                <el-menu-item index="ChartLayout-other">其他</el-menu-item>
                <!-- <el-submenu index="2-4">
                    <template slot="title">demo</template>
                    <el-menu-item index="demo1">选项1</el-menu-item>
                    <el-menu-item index="demo2">选项2</el-menu-item>
                </el-submenu> -->
            </el-submenu>
            <el-menu-item index="demo1">demo1</el-menu-item>
            <el-menu-item index="demo2">demo2</el-menu-item>
            <!-- <el-menu-item index="3">消息中心</el-menu-item>
            <el-menu-item index="4"
                ><a href="https://www.ele.me" target="_blank"
                    >订单管理</a
                ></el-menu-item
            > -->
        </el-menu>
    </div>
</template>

<script>

export default {
    data() {
        return {
            activeIndex: 'Home',
            activeIndex2: 'Home',
        };
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
            this.$store.commit('navMut', keyPath[keyPath.length - 1]);
            this.$store.commit('loadingMut', true);
            this.$router.push({
                name: keyPath[0]
            });
            setTimeout(()=>{
                this.$store.commit('loadingMut', false);
            },500);
        },
    },
};
</script>

<style lang="scss" scoped>
.head {
    width: 100%;
    height: 60px;
    background: rgba($color: #545c64, $alpha: 1.0);
    display: flex;
    .logo{
        width: 250px;
        font-size: 2rem;
        line-height: 60px;
        color: white;
        font-weight: bold;
    }
}
</style>
